<html>
<title>v-cloak</title>

<head>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            let app = new Vue({
                el: '.container',
                data: {
                    msg: "welcome to china <a>666 "
                },
                created: function () {
                    alert(111);
                }
            })
        }

    </script>
    <style>
        /* 必须保证将v-cloak标注的元素隐藏才能实现v-cloak的功能 */
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- v-cloak 保证{{}}中的内容获取成功后才会显示，而不会显示{{}} -->
        <!-- {{ }} 是单向绑定；v-model是双向绑定 -->
        <p>Hi,<span v-cloak>{{msg}}</span></p>
        <!-- 直接把标签当作普通文本 -->
        <h3 v-text="msg"></h3>
        <!-- 可以识别标签 -->
        <h3 v-html="msg"></h3>
        <!-- 只会渲染一次，后面msg再改变也不会修改 -->
        <h3 v-once>{{msg}}</h3>
        <!-- 原样显示{{}} -->
        <h3 v-pre>{{msg}}</h3>
    </div>
</body>

</html>